<template>
<!--    <h1>{{ fullName }}</h1>-->
    <h1>{{ fullName2 }}</h1>
    <input type="text" v-model="fullName2">
    <button @click="changInfo">修改</button>
</template>

<script>

import {ref, reactive, computed} from "vue";

export default {
    name: 'App',

    setup() {
        let name = reactive({
            firstName: "张",
            lastName: "三"
        })

       /* let fullName = computed(() =>{
            return name.firstName + name.lastName
        })*/

        let fullName2 = computed({
            get() {
                return name.firstName + "_" + name.lastName
            },
            // 双向绑定有用，在文本框
            set(val) {
                console.log(val)
                let names = val.split("_")
                name.firstName = names[0]
                name.lastName = names[1]
                console.log("D房东发")
            }
        })

        // 方法
        function changInfo() {
            // 这里修改计算属性没用
            fullName2 = "收到垃圾分类的_手机发来的时间"
        }

        return {
            fullName2,changInfo
        }
    }
}
</script>

<style>

</style>
